<template>
  <div id="app">
    <h2>自定义指令</h2>
    <h3>1.全局注册指令</h3>
    <p v-color="pink">你来设置颜色</p>
    <em v-color="purple">em设置颜色</em>
    <h3>2.局部注册</h3>
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      pink: "pink",
      purple: "purple",
    };
  },
  // v-focus
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus();
      },
    },
  },
};
</script>

<style>
</style>
